<script setup>
//导入echarts所有居名导出内容然后起别名echarts
import * as echarts from "echarts"
import { onMounted, ref } from "vue";
const map1 = ref()
const map2 = ref()
const draw = () => {
    var myChart = echarts.init(map1.value);
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '运动鞋', '袜子']
        },
        yAxis: {},

        series: [
            {
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表.。
    myChart.setOption(option);
    var myChart2 = echarts.init(map2.value);
    // 指定图表的配置项和数据
    var option2 = {
        series: [
            {
                type: 'pie',
                data: [
                    {
                        value: 100,
                        name: 'A'
                    },
                    {
                        value: 200,
                        name: 'B'
                    },
                    {
                        value: 300,
                        name: 'C'
                    },
                    {
                        value: 400,
                        name: 'D'
                    },
                    {
                        value: 500,
                        name: 'E'
                    }
                ],
                roseType: 'area'
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);

}
onMounted(() => {
    draw()
})
</script>
<template>
    <div class="home">
        <el-row>
            <el-col :span="12">
                <div ref="map1" class="map map1">

                </div>
            </el-col>
            <el-col :span="12">
                <div ref="map2" class="map map2">

                </div>
            </el-col>
        </el-row>
    </div>
</template>
<style lang="less">
.home {
    height: 100%;

    .map {
        height: 200px;
    }
}
</style>